Hi
I have a table with four columns. there exist a div for each of them.
The data in one column is an href i.e link.
Based on certain condition, i want to disable the links in these columns. but user should be able to view it but the links should be disabled.
Is there any possibility to gray-out the required div by HTML, CSS or JAvascript?
Thanks and Best Regards
8  18081 
What are the "certain conditions". depending on what they are you may need server side coding, but possible Javascript will sort you out
What are the "certain conditions". depending on what they are you may need server side coding, but possible Javascript will sort you out
Hi
Thank u for your reply
The condition is such that, I check for the typr of user in my application , if it is a member , then the div should be grey-out and links should be disabled. If the user is editor type user then, the the div should not be grey-out. this user type of checking is done in jsp.
how to grey out this with using javascript?
Thanks for your quick help.
Best regards,
Without javascript, no.
hi
I want it in javascript only. If u have solution pls tell me.
I said it WITH javascript.
Thanks
Then you need to ask in the javascript forum. I'll send you there.
pbmods 5,821
Recognized Expert Expert
Heya, javakid.
The easiest way to do this is to create an absolutely-positioned div with background-color of grey and opacity of 0.5.
When a column is supposed to be disabled, show the div overlayed over that column. The div will intercept any clicks, thus rendering the links unusable.
I think.
It's been awhile since I've done this.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
-
<html>
-
<head>
-
<title>Untitled</title>
-
</head>
-
-
<style>
-
body {margin:15px; text-align:auto}
-
.holder {margin:5px auto; height:100px; width:500px; border:1px solid #000;}
-
</style>
-
-
<script>
-
-
function disableDiv(elm) {
-
-
while (elm.tagName !="DIV") {
-
elm = elm.parentNode
-
}
-
-
_width = elm.offsetWidth
-
_height = elm.offsetHeight
-
_top = elm.offsetTop
-
_left = elm.offsetLeft
-
-
overlay = document.createElement("div")
-
overlay.style.width = _width + "px"
-
overlay.style.height = _height + "px"
-
overlay.style.position = "absolute"
-
overlay.style.background = "#dedede"
-
overlay.style.top = _top + "px"
-
overlay.style.left = _left + "px"
-
-
overlay.style.filter = "alpha(opacity=50)"
-
overlay.style.opacity = "0.5"
-
overlay.style.mozOpacity = "0.5"
-
-
document.getElementsByTagName("body")[0].appendChild(overlay)
-
}
-
-
</script>
-
-
<body>
-
-
<div class="holder">
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
</div>
-
-
<div class="holder">
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
</div>
-
-
<div class="holder">
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
</div>
-
-
<div class="holder">
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
</div>
-
-
</body>
-
</html>
-
I believe this is more or less what you need!
Good luck!
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
-
<html>
-
<head>
-
<title>Untitled</title>
-
</head>
-
-
<style>
-
body {margin:15px; text-align:auto}
-
.holder {margin:5px auto; height:100px; width:500px; border:1px solid #000;}
-
</style>
-
-
<script>
-
-
function disableDiv(elm) {
-
-
while (elm.tagName !="DIV") {
-
elm = elm.parentNode
-
}
-
-
_width = elm.offsetWidth
-
_height = elm.offsetHeight
-
_top = elm.offsetTop
-
_left = elm.offsetLeft
-
-
overlay = document.createElement("div")
-
overlay.style.width = _width + "px"
-
overlay.style.height = _height + "px"
-
overlay.style.position = "absolute"
-
overlay.style.background = "#dedede"
-
overlay.style.top = _top + "px"
-
overlay.style.left = _left + "px"
-
-
overlay.style.filter = "alpha(opacity=50)"
-
overlay.style.opacity = "0.5"
-
overlay.style.mozOpacity = "0.5"
-
-
document.getElementsByTagName("body")[0].appendChild(overlay)
-
}
-
-
</script>
-
-
<body>
-
-
<div class="holder">
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
</div>
-
-
<div class="holder">
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
</div>
-
-
<div class="holder">
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
</div>
-
-
<div class="holder">
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
-
</div>
-
-
</body>
-
</html>
-
I believe this is more or less what you need!
Good luck!
God Bless U, Thanks
Thank u for your help , it did help me.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Isabelle |
last post by:
Hey,
How do you feel about using grey text for copy? I love grey for its neutral
presence and ability to downplay something and give a clear and crisp look
to the overall design of a site but...
|
by: Jacques Chaurette |
last post by:
Hello all , thanks in advance for any help. While looking for a solution to how to replace the grey box while an applet loads, a search of Google got me an article by Glenn s. Peffers that claims to...
|
by: Sérgio Almeida |
last post by:
Greetings
Is it possible to change the color of a combobox (combobox arrow
button), instead of grey? If so, how??
Thanks
Sérgio
|
by: ReidarT |
last post by:
I use a label to write some help-text in a web-form.
I don't want the user to be able to click in this field so I have disabled
it, enable = false.
The text color turns grey. I use a cssclass with...
|
by: Peter Verijke |
last post by:
Hi,
I have a possible framework bug.
Sometimes when i call other code by double clikking the datagrid, i get
on returning a grey colored cell over the active cell, still showing the
old data....
| | |
by: Jeff Jarrell |
last post by:
The thin grey line that goes across the editor to mark off the
sub\functions\regions from one another, is there a way to turn it off?
I was considering using an underscore for my private member...
|
by: Andrew Kidd |
last post by:
I see this when I'm stepping through in the debugger ... just thought I'd
ask, and I just know it's going to be one of those "Doh" moments, but it's
got me foxed just now.
|
by: SpankyTClown |
last post by:
When I set an objects data enabled property, the form displays these
objects in grey. Is there any way to change the colour?
Thanks
|
by: BrendanMcPherson |
last post by:
How can I get a listbox to change a textbox on some selections.
I have a listbox which only needs to be filled in on some selections.
Is there a way I can have on some selections the textbox go...
|
by: marfola |
last post by:
I'm trying to implement bottom-to-top vertical text using CSS attributes in IE :
writing-mode: tb-rl;
filter: flipv fliph;
But I have encountered the following: the text is...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
